

<template>
   <div class="plans_main">
        <div class="plans_content" >

          <div>
            <div class="plans_content_box" style="height: 250px;">
<!--              <div class="plans_content_title" >设备-音频模板-视频模板加量包</div>-->
              <div class="plans_content_radio_box">

                <t-space direction="vertical">
                  <div v-for="(item,index) in devicePackagesList"  v-bind:key="index"
                       :class="'plans_content_radio' + (deviceContentValue === index ? ' plans_content_radio_active' : '') "
                       @click="deviceContentValue = index"
                  >
                    <t-space >
                      <p class="plans_sj" v-if="item.type===1"> 设备数量：{{item.numbers}}台</p>
                      <p class="plans_sj"  v-if="item.type===2"> 音频模板数量：{{item.numbers}}个</p>
                      <p class="plans_sj"  v-if="item.type===3"> 视频模板数量：{{item.numbers}}个</p>
                      <p class="plans_sj">￥{{item.price}}</p>
                      <p class="plans_yj">原价￥{{item.hx_price}}</p>
                    </t-space>
                  </div>
                  <t-form>
                  <t-form-item labelAlign="left" label="购买数量："  >
                    <t-input-number v-model="number" />
                  </t-form-item>
                    <t-form-item labelAlign="left" label="金额："  >
                      <p class="plans_sj">￥{{price * number}}</p>
                    </t-form-item>
                  </t-form>


                </t-space>
              </div>
              <div style="margin-left: 20px;">
                <t-space >
                  <p v-if="item.type===1"> 设备数量：{{device_numbes * number}}台</p>
                  <p v-if="item.type===2"> 音频模板数量：{{device_numbes * number}}个</p>
                  <p v-if="item.type===3"> 视频模板数量：{{device_numbes * number}}个</p>
                </t-space>
              </div>
            </div>
            <div class="plans_content_box_bottom" style="">
              <div style="color: #C8B992FF;">
                <h2 style="font-size: 18px;">支付订单</h2>
                <p style="font-size: 12px">支付成功后可在个人中心/我的订单中查看</p>
              </div>
              <div>
                <t-button shape="round" theme="default" style="background-color: #C8B992FF;color: #605B50FF;" @click="pay" >立即支付</t-button>
              </div>
            </div>
          </div>
        </div>
   </div>

  <t-dialog
      v-model:visible="isDialogPay"
      header="订单支付"
      width="50%"
      :footer="false"
  >
    <!-- 通过 props 传递参数 -->
    <OrderPay v-if="isDialogPay" :item="device" @close="closeDrawer" />
  </t-dialog>

</template>
<script setup>
import {ref} from "vue";
import {get} from "@/utils/api";
import config from "@/config";
import OrderPay from "./OrderPay.vue";
const deviceContentValue = ref(0);
const devicePackagesList = ref([]);
const isDialogPay = ref(false);
const device = ref(null);
const number = ref(1);
const price = ref(0);
const device_numbes = ref(0)

// eslint-disable-next-line vue/no-setup-props-destructure
const { item } = defineProps({
  item: {
    type: Object,
    required: true,
  },
});


const pay = () => {
  isDialogPay.value = true
  price.value = devicePackagesList.value[deviceContentValue.value].price
  device.value ={
    id:devicePackagesList.value[deviceContentValue.value].id,
    type:item.orderType,
    num:number.value,
  }
}

const closeDrawer = () => {
  isDialogPay.value = false;
  //刷新页面
  setTimeout(() => {
    window.location.reload()
  },1000)
};

get(config.getDevicePackagesList,  {type:item.type}).then(res => {
  console.log(res.data)
  devicePackagesList.value = res.data.data
  deviceContentValue.value =0
  price.value = devicePackagesList.value[deviceContentValue.value].price
  device_numbes.value = devicePackagesList.value[deviceContentValue.value].numbers
})




</script>
<style scoped>


.plans_container {
  display: flex;
  gap: 10px; /* 元素间距 */
}
.plans_title{
  flex: 1; /* 平均分配宽度 */
  min-width: 0; /* 防止内容溢出 */
  border-radius: 10px 10px 0px 0px;
  background-color: rgba(95,95,95,1);
  line-height: 1.8;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}
.plans_title:hover{
  background: linear-gradient(92.96deg, rgba(119,109,91,1) 3.58%,rgba(200,185,146,1) 77.77%);
  box-shadow: 0px 2px 6px 0px rgba(42,42,40,1);
  border: 1px solid rgba(255,255,255,0.3);
}
.plans_title_active{
  background: linear-gradient(92.96deg, rgba(119,109,91,1) 3.58%,rgba(200,185,146,1) 77.77%);
  box-shadow: 0px 2px 6px 0px rgba(42,42,40,1);
  border: 1px solid rgba(255,255,255,0.3);
}
.plans_title h2{
  color: rgba(233,232,230,1);
  font-size: 22px;
}
.plans_title  p{
  color: rgba(233,232,230,1);
  font-size: 14px;
}
.plans_content{
  padding: 20px 0;
  display: grid;
  gap: 16px;

}
.plans_content_box{
  border-radius: 10px;
  background-color: rgba(53,53,53,1);
}
.plans_qy_title{
  color: rgba(200,185,146,1);
  font-size: 22px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(69,69,69,1);
  text-align: center;
}
.plans_qy_content{
  color: rgba(185,185,185,1);
  font-size: 14px;
  padding: 10px 20px;
  line-height: 1.8;
}
.plans_content_title{
  color: rgba(200,185,146,1);
  font-size: 22px;
  height: 50px;
  line-height: 50px;
  text-align: left;
  padding-left: 20px;
}
.plans_content_radio_box{
  padding: 20px 20px;
}
.plans_content_radio{

  border-radius: 10px;
  border: 1px solid rgba(69,69,69,1);
  text-align: center;
  padding: 10px 30px;

}
.plans_content_radio:hover{
  background-color: rgba(200,185,146,0.08);
  border: 1px solid rgba(200,185,146,1);
  color: rgba(200,185,146,1);
}
.plans_content_radio_active{
  background-color: rgba(200,185,146,0.08);
  border: 1px solid rgba(200,185,146,1);
  color: rgba(200,185,146,1);
}
.plans_sc{
  font-size: 14px;
}
.plans_sj{
  font-size: 14px;
  display: flex;
}
.plans_yj{
  font-size: 12px;
  text-decoration: line-through;
}
.plans_content_box_bottom{
  align-items: center;
  padding: 40px 20px;
  height: 20%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  background-color: rgba(53,53,53,1);
}

</style>
